<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智慧社区后台</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap-table/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-switch/css/bootstrap-switch.min.css" />
</head>
<style>
</style>
<body style="padding-bottom: 90px; background-color: #ECF0F5;">
	<section class="content" style="margin: 15px; background-color: white;">
		<div class="row">
			<div class="col-sm-12">
				<table id="table">
					<thead style="background-color: #00C0EF">
						<tr style="background-color: #00C0EF">
							<th class="text-center" data-field="communityName">小区名</th>
							<th class="text-center" data-field="numberPeriods">期数</th>
							<th class="text-center" data-field="building">楼栋</th>
							<th class="text-center" data-field="unit">单元</th>
							<th class="text-center" data-field="doorCard">门牌号</th>
							<th class="text-center" data-field="builtTime">建成时间</th>
							<th class="text-center" data-field="a">欠费状态</th>
							<th class="text-center" data-field="id">操作</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</section>
</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-toolbar.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-filter-control.js"></script>
<script src="${pageContext.request.contextPath}/js/date.js"></script>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script>
	function actionFormatter(value, row, index) {
		var pay = "<button class='btn btn-primary btn-xs glyphicon glyphicon-credit-card' onclick='pay(\""
				+ row.id + "\");'>缴费</button>";
		var generate = "<button class='btn btn-danger btn-xs glyphicon glyphicon-print' onclick='generate(\""
				+ row.id + "\");'>生成催费单</button>";
		if (row.s2 != null & row.s2 != '') {
			var oDate1 = new Date(row.s2);
			var oDate2 = new Date();
			if (oDate1.getTime() < oDate2.getTime()) {
				return pay + "&nbsp;" + generate;
			}
		} else {
			var oDate1 = new Date(row.s1);
			var oDate2 = new Date();
			if (oDate1.getTime() < oDate2.getTime()) {
				return pay + "&nbsp;" + generate;
			}
		}
		return pay;
	}

	var table_dataset = [ {
		field : 'communityName',
		align : 'center',
	}, {
		field : 'numberPeriods',
		align : 'center',
	}, {
		field : 'building',
		align : 'center',
	}, {
		field : 'unit',
		align : 'center',
		formatter : function Formatter(value, row, index) {
			return row.unit + "单元"
		}
	}, {
		field : 'doorCard',
		align : 'center',
	}, {
		field : 'builtTime',
		align : 'center',
		formatter : function Formatter(value, row, index) {
			return (new Date(row.builtTime)).Format("yyyy-MM-dd");
		}
	}, {
		field : 'a',
		align : 'center',
		formatter : function Formatter(value, row, index) {
			if (row.s2 != null & row.s2 != '') {
				var oDate1 = new Date(row.s2);
				var oDate2 = new Date();
				if (oDate1.getTime() > oDate2.getTime()) {
					return "正常";
				} else {
					return "<span style='color:red'>欠费</span>";
				}
			} else {
				var oDate1 = new Date(row.s1)
				var oDate2 = new Date();
				if (oDate1.getTime() > oDate2.getTime()) {
					return "正常";
				} else {
					return "<span style='color:red'>欠费</span>";
				}
			}
		}
	}, {
		align : 'center',
		formatter : actionFormatter
	} ];
	$('#table')
			.bootstrapTable(
					{
						url : "${pageContext.request.contextPath}/selectHouseList",
						idField : "id",
						columns : table_dataset,
						striped : true, //是否显示行间隔色
						pagination : true, //是否显示分页
						pageSize : 10, //每页的记录行数
						pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数
						search : false, //是否显示搜索
						showRefresh : true,
						clickToSelect : true, //是否启用点击选中行
						sidePagination : "server", //表示服务端请求  
						queryParamsType : "limit",
						queryParams : function queryParams(params) { //设置查询参数  
							var param = {
								offset : params.offset,
								limit : params.limit,
								numberPeriods : $("#numberPeriods").val(),
								building : $("#building").val(),
								unit : $("#unit").val(),
								doorCard : $("#doorCard").val(),
								isPay : 1
							};
							return param;
						},
						toolbar : "<button class='btn btn-danger glyphicon glyphicon-print' onclick='generate(\""
								+ ''
								+ "\");'>生成全部催费单</button>"
								+ "<div class='input-group' style='width:150px;float:right;margin-top:2px;margin-left:20px;'><input type='text' class='form-control' placeholder='请输入门牌号' id='doorCard'>"
								+ "<span class='input-group-btn' style='margin-left:20px;'><button class='btn btn-default' type='button' onclick='querry(\""
								+ ''
								+ "\");'>查询</button></span></div>"
								+ "<div class='input-group' style='width:100px;float:right;margin-top:2px;margin-left:20px;'><input type='text' class='form-control' placeholder='请输入单元' id='unit'>"
								+ "</div>"
								+ "<div class='input-group' style='width:100px;float:right;margin-top:2px;margin-left:20px;'><input type='text' class='form-control' placeholder='请输入楼栋' id='building'>"
								+ "</div>"
								+ "<div class='input-group' style='width:100px;float:right;margin-top:2px;margin-left:20px;'><input type='text' class='form-control' placeholder='请输入期数' id='numberPeriods'>"
								+ "</div>",
						icons : {
							paginationSwitchDown : 'glyphicon-collapse-down icon-chevron-down',
							paginationSwitchUp : 'glyphicon-collapse-up icon-chevron-up',
							refresh : 'glyphicon-refresh icon-refresh',
							toggle : 'glyphicon-list-alt icon-list-alt',
							columns : 'glyphicon-th icon-th',
							detailOpen : 'glyphicon-plus icon-plus',
							detailClose : 'glyphicon-minus icon-minus',
							"export" : 'glyphicon-export icon-share'
						},
						showExport : true,
						exportDataType : 'basic',
						exportTypes : [ 'json', 'xml', 'csv', 'txt', 'sql',
								'excel' ],
					});

	//弹窗
	function pay(id) {
		var index = layer
				.open({
					type : 2,
					// 							area : [ '850px', '800px' ],
					fix : false, //不固定
					// 							maxmin : true,
					shade : 0.4,
					offset : [ 50 ],
					title : '缴费',
					content : '${pageContext.request.contextPath}/jump_house_pay_detail?id='
							+ id,
					btn : [ "缴费" ],
					btn1 : function(index, layero) {
						var iframeWin = window[layero.find('iframe')[0]['name']];
						iframeWin.insert();//执行子页面的方法
					}
				});
		layer.full(index);
	}

	function generate() {
		layer.full(layer.open({
			type : 2,
			// 			area : [ '715px', '600px' ],
			fix : false, //不固定
			// 			maxmin : true,
			shade : 0.4,
			offset : [ 150 ],
			title : '打印预览',
			content : '${pageContext.request.contextPath}/jump_house_pay_print',
			btn : [ "打印" ],
			btn1 : function(index, layero) {
				layer.msg('正在开发中...', {
					icon : 1,
					time : 800
				});
			}
		}));
	}

	function querry() {
		$("#table").bootstrapTable('refresh');
		$("#numberPeriods").val('');
		$("#building").val('');
		$("#unit").val('');
		$("#doorCard").val('');
	}
</script>
</html>
